<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<title>票据分类</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css"/>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<!-- mobileSelect -->
		<link rel="stylesheet" type="text/css" href="plugins/mobileSelect/mobileSelect.css">
		<script src="plugins/mobileSelect/mobileSelect.js" type="text/javascript"></script>
		<!-- icheck -->
		<script src="plugins/icheck/icheck.js" type="text/javascript" charset="utf-8"></script>
		<!-- noUiSlider -->
		<link rel="stylesheet" type="text/css" href="plugins/noUiSlider.10.0.0/nouislider.css" />
		<script src="plugins/noUiSlider.10.0.0/nouislider.js" type="text/javascript" charset="utf-8"></script>
		<!-- switchery -->
		<link rel="stylesheet" type="text/css" href="plugins/switchery/switchery.css"/>
		<script src="plugins/switchery/switchery.js" type="text/javascript" charset="utf-8"></script>
		<!-- iconfont -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
		
		<style type="text/css">
			.choose{
				    display: flex;
				    flex-direction: row;
				    justify-content: space-around;
			}
			.mouthChoose{
				display: flex;
				    flex-direction: row;
				    align-items: center;
			}
		</style>
	</head>
	

	<body class="pb12 fadeIn animated">
		<header class="ui-header clearfix w75 h8 f46 pl3 pr3 color8 bg-color-success t-c o-h">
			<div class="ui-header-l fl w5">
				<img src="./img/triangle_left.png" onclick="javascript:window.history.back(-1);" class="returnBack"/>
			</div>
			<div class="ui-header-c fl f30 w59">
				票据分类
			</div>
			<div class="ui-header-r fr w5">
				<i class="icon iconfont icon-phone"></i>
			</div>
		</header> 
		<h2 class="f32 bbbcf1 pl2 pr2 pt2 choose">
			<div><span id="selectBox3">按月份</span><a href="#"><img src="./img/triangle.png"/></a></div>
			<div><span id="selectBox4">按类型</span><a href="#"><img src="./img/triangle.png"/></a></div>
		</h2>
		<!--模块1，票据月份 star-->
		<div class="mouthType">
			<!--2018年9月抵扣票-->
			<div class="mt1 mb1 pt1 pb1 mouthChoose bbbcf2">
				<div class="w14 ml1 mr1"><img src="img/s3.jpg" class="w14 h12"></div>
				<div class="w39">
					<span class="mr1">2018年9月抵扣票</span><br>
					<span class="f28">类型:子女教育，赡养老人，住房基金</span>
				</div>
				<div class="w17 t-r ml1">
					<span  class="red">9999.00元</span><br>
					<span>共三张</span>
				</div>
				<div class="w5 ml2"><a href="mouthAndClass.html"><img src="./img/arrow.png"/></a></div>
			</div>
			<!--2018年8月抵扣票-->
			<div class="mt1 mb1 pt1 pb1 mouthChoose bbbcf2">
				<div class="w14 ml1 mr1"><img src="img/s3.jpg" class="w14 h12"></div>
				<div class="w39">
					<span class="mr1">2018年8月抵扣票</span><br>
					<span class="f28">类型:子女教育，赡养老人，住房基金</span>
				</div>
				<div class="w17 t-r ml1">
					<span  class="red">9999.00元</span><br>
					<span>共三张</span>
				</div>
				<div class="w5 ml2"><a href="mouthAndClass.html"><img src="./img/arrow.png"/></a></div>
			</div>
		</div>
		<!--end-->
		<!--模块2，票据类型 star-->
		<div class="classType">
			<!--类型--租房租金-->
			<div class="mt1 mb1 pt1 pb1 mouthChoose bbbcf2">
				<div class="w14 ml1 mr1"><img src="img/s3.jpg" class="w14 h12"></div>
				<div class="w39">
					<span class="mr1">租房租金</span><br>
					<span class="f28">月份:10月、9月、8月、7月</span>
				</div>
				<div class="w17 t-r ml1">
					<span  class="red">8888.00元</span><br>
					<span>共四张</span>
				</div>
				<div class="w5 ml2"><a href="mouthAndClass.html"><img src="./img/arrow.png"/></a></div>
			</div>
			<div class="mt1 mb1 pt1 pb1 mouthChoose bbbcf2">
				<div class="w14 ml1 mr1"><img src="img/s3.jpg" class="w14 h12"></div>
				<div class="w39">
					<span class="mr1">子女教育</span><br>
					<span class="f28">月份:10月、9月、8月、7月</span>
				</div>
				<div class="w17 t-r ml1">
					<span  class="red">8888.00元</span><br>
					<span>共四张</span>
				</div>
				<div class="w5 ml2"><a href="mouthAndClass.html"><img src="./img/arrow.png"/></a></div>
			</div>
		</div>
		<!--end-->
		<script  type="text/javascript">
			var mouthArr = [{
					id: '1',
					value: '2018年',
					childs: [{
							id: '0',
							value: '全部'
						},{
							id: '1',
							value: '1月'
						},
						{
							id: '2',
							value: '2月'
						},
						{
							id: '3',
							value: '3月'
						},
						{
							id: '4',
							value: '4月'
						},
						{
							id: '5',
							value: '5月'
						},
						{
							id: '6',
							value: '6月'
						},
						{
							id: '7',
							value: '7月'
						},
						{
							id: '8',
							value: '8月'
						},
						{
							id: '9',
							value: '9月'
						},
						{
							id: '10',
							value: '10月'
						},
						{
							id: '11',
							value: '11月'
						},
						{
							id: '12',
							value: '12月'
						},
					]
				},
			];
			var classArr = [{
					id: '0',
					value: '默认',
					childs: [{
							id: '11',
							value: '全部'
						}
					]
				},
				{
					id: '1',
					value: '教育类',
					childs: [{
							id: '11',
							value: '子女教育'
						},
						{
							id: '12',
							value: '继续教育'
						}
					]
				},
				{
					id: '2',
					value: '医疗类',
					childs: [{
							id: '12',
							value: '大病医疗'
						}
					]
				},
				{
					id: '3',
					value: '住房类',
					childs: [{
							id: '13',
							value: '住房租金'
						},
						{
							id: '14',
							value: '住房贷款'
						}
					]
				},
				{
					id: '4',
					value: '赡养类',
					childs: [{
							id: '15',
							value: '赡养老人'
						}
					]
				}
			];
			
			//月份 下拉 选择框
			var mouthSelect = new MobileSelect({
				trigger: '#selectBox3',
				title: '单项选择',
				wheels: [{
					data: mouthArr
				}],
				position: [0, 1], //初始化定位 打开时默认选中的哪个 如果不填默认为0
				callback: function(indexArr, data) {
					console.log(data);
				}
			});
			
			//类型 下拉 选择框
			var classSelect = new MobileSelect({
				trigger: '#selectBox4',
				title: '单项选择',
				wheels: [{
					data: classArr
				}],
				position: [1, 1], //初始化定位 打开时默认选中的哪个 如果不填默认为0
				callback: function(indexArr, data) {
					console.log(data);
				}
			});
		</script>
	</body>

</html>